<template>
  <div class="hello">

  </div>
</template>
<script lang="ts">
export default {name: 'HelloWorld'}
</script>
<script lang="ts" setup>
// props
const props = withDefaults(defineProps<{
  msg: string
}>(), {
  msg: 'default message'
})
// emits
const emit = defineEmits<{
  (event: 'click', e: MouseEvent): void
  (event: 'hover', e: MouseEvent, index: number): void
}>();

const click = (e: MouseEvent):void => {
  emit('click', e);
}
const hover = (e: MouseEvent, index: number):void => {
  emit('hover', e, index);
}

// 生命周期
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
